<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    [[message]]
    <hr>
    <a v-bind:href="next">点击有惊喜</a>
    <hr>
    <a href="#" v-if="isLogin">个人中心</a>
    <a href="#" v-else>登陆</a>
    <hr>
    <a href="#" v-if="level===5">皇帝</a>
    <a href="#" v-else-if="level===4">皇亲</a>
    <a href="#" v-else-if="level===3">国戚</a>
    <a href="#" v-else-if="level===2">大臣</a>
    <a href="#" v-else-if="level===1">平民</a>
    <hr>
    <span v-if="seen">if</span>
    <span v-show="seen">show</span>
    <hr>
    <ul>
        <!-- <li v-for="shop in shops">[[shop]]</li>-->
        <!-- <li v-for="(列表元素,索引) in 变量">{{变量}}</li>-->
        <!--        <li v-for="(shop,index) in shops">[[index+1]]:[[shop]]</li>-->
        <li v-for="(value,name) in object">[[name]]:[[value]]</li>
    </ul>
    <hr>
    <button v-on:click="count+=1">ADD 1</button>
    <span>count:[[count]]</span>
    <hr>
    <button v-on:click="login">注册</button>
    <hr>
    <button v-on:click="sayHi('xiaoming')">sayHi</button>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        delimiters: ['[[', ']]'],
        data: {
            message: 'hello',
            next: 'http://www.baidu.com',
            isLogin: true,
            level: 2,
            seen: true,
            // shops:['北京','广州','上海'],
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            },
            count: 1

        },
        methods: {
            //函数
            login:function (){
                alert('登录中……')
            },
            sayHi:function (message){
                alert(message)
            }
        }
    })
</script>
</html>